<script  lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from "vue";
  let temperature = ref(10)
  let level = ref(0)
  function changeTemperature  (){
    temperature.value += 10
  }
  function changeLevel (){
    level.value += 10
  }

  /*
  * 官网：立即运行一个函数，同时响应式的追踪其依赖，并在依赖更改时重新执行该函数
  * watch对比watchEffect
  * 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
  * watch：要明确指出监视的数据
  * watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）
  * */



  //监视 -- watch实现
  /*watch([temperature,level],(value)=>{
    let [newTemperature,newLevel] = value
    if (newTemperature >= 60 || newLevel >=80){
      console.log('给服务器发请求')
    }
  })*/
  //监视 -- watchEffect 实现
  watchEffect(()=>{
    if (temperature.value >= 60 || level.value >= 80) {
      console.log('给服务器发请求')
    }
  })

</script>

<template>
  <div class="prisonBox">
    <h1>需求：当水温达到60℃或水位到达80cm时，给服务器发送请求</h1>
    <h2>当前水温：{{temperature}}℃</h2>
    <h2>当前水位：{{level}}cm</h2>
    <button @click="changeTemperature">水温+10</button>
    <button @click="changeLevel">水位+10</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0 10px;
      }
    }
</style>